<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small">
          查询结果
        </el-button>
        <el-button
          style="float: right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input style="width: 203px" v-model="searchMap.where.productName" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品货号：">
            <el-input style="width: 203px" v-model="searchMap.where.productSn" placeholder="商品货号"></el-input>
          </el-form-item>
          <el-form-item label="商品分类：">
            <el-cascader
              clearable
              v-model="searchMap.where.cat3Id"
              :options="cats">
            </el-cascader>
          </el-form-item>
          <el-form-item label="商品品牌：">
            <el-select v-model="searchMap.where.brandId" placeholder="请选择品牌" clearable>
              <el-option
                v-for="item in brandOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上架状态：">
            <el-select v-model="searchMap.where.marketStatus" placeholder="全部" clearable>
              <el-option
                v-for="item in publishStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态：">
            <el-select v-model="searchMap.where.auditStatus" placeholder="全部" clearable>
              <el-option
                v-for="item in verifyStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
        class="btn-add"
        @click="handleAddProduct()"
        size="mini">
        添加
      </el-button>
    </el-card>
    <!-- 数据表格 -->
    <div class="table-container">
      <el-table ref="productTable"
                :data="list"
                style="width: 100%"
                
                v-loading="false"
                border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="100" align="center" prop="spuId">
        </el-table-column>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope"><img style="height: 80px" :src="scope.row.albumPics|splitImg"></template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <a :title="scope.row.goodsName">{{scope.row.goodsName|goodsNameFilter}}</a>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="120" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{scope.row.price}}</p>
            <p>货号：{{scope.row.productSn}}</p>
          </template>
        </el-table-column>
        <el-table-column label="上架/下架" width="140" align="center">
          <template slot-scope="scope">
            <p>上架：
              <el-switch
                @change="handlePublishStatusChange(scope.$index, scope.row)"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                v-model="scope.row.isMarketable">
              </el-switch>
            </p>
           
          </template>
        </el-table-column>
    
        <el-table-column label="SKU库存" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="handleShowSkuEditDialog(scope.$index, scope.row)" circle></el-button>
          </template>
        </el-table-column>
        <el-table-column label="销量" width="100" align="center">
          <template slot-scope="scope">{{scope.row.sale}}</template>
        </el-table-column>
        <el-table-column label="审核状态" width="100" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.auditStatus | auditStatusFiler(verifyStatusOptions)}}</p>
            <p>
              <el-button
                type="text"
                @click="handleShowVerifyDetail(scope.$index, scope.row)">审核详情
              </el-button>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="handleShowProduct(scope.$index, scope.row)">查看
              </el-button>
              <el-button
                size="mini"
                @click="handleUpdateProduct(scope.$index, scope.row)">编辑
              </el-button>
            </p>
            <p>
              <el-button
                size="mini"
                @click="handleShowLog(scope.$index, scope.row)">日志
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>

       <br />

    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="searchMap.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    </div>
  </div>
</template>
<script>
import {findAllBrand} from "../api/brand"
import {CatCascade} from "../api/cat"
import {search,changeGoodStatus} from "../api/goods"
  const defaultListQuery = {
    keyword: null,
    pageNum: 1,
    pageSize: 5,
    publishStatus: null,
    verifyStatus: null,
    productSn: null,
    productCategoryId: null,
    brandId: null
  };
  export default {
    name: "productList",
    data() {
      return {
        searchMap:{
             page:1,
             size:5,
             where:{
                 
             }   
        },  
        total: 0,
        brandOptions: [],  //商品品牌
        cats: [], //分类信息
        list: [], //商品数据
        editSkuInfo:{
          dialogVisible:false,
          productId:null,
          productSn:'',
          productAttributeCategoryId:null,
          stockList:[],
          productAttr:[],
          keyword:null
        },
        operates: [
          {
            label: "商品上架",
            value: "publishOn"
          },
          {
            label: "商品下架",
            value: "publishOff"
          },
          {
            label: "设为推荐",
            value: "recommendOn"
          },
          {
            label: "取消推荐",
            value: "recommendOff"
          },
          {
            label: "设为新品",
            value: "newOn"
          },
          {
            label: "取消新品",
            value: "newOff"
          },
          {
            label: "转移到分类",
            value: "transferCategory"
          },
          {
            label: "移入回收站",
            value: "recycle"
          }
        ],
        operateType: null,
        listQuery: Object.assign({}, defaultListQuery),
        
        total: null,
        listLoading: true,
        selectProductCateValue: null,
        multipleSelection: [],
        
        publishStatusOptions: [{
          value: 1,
          label: '上架'
        }, {
          value: 0,
          label: '下架'
        }],
        verifyStatusOptions: [{
          value: 2,
          label: '审核不通过'
        }, {
          value: 1,
          label: '审核通过'
        }, {
          value: 0,
          label: '未审核'
        }],
       
      }
    },
    methods: {
        search(){
            search(this.searchMap).then(res =>{
                this.list = res.data
                this.total = res.total
            })
        },
        //查询品牌信息
        findAllBrand(){
            findAllBrand().then(res =>{
                this.brandOptions = res.data;
            })
        },
        //查询三级分类
        findCatCascade(){
            CatCascade().then(res =>{
                this.cats = res
            })
        },
        handleAddProduct(){
            this.$router.push({path:"/goods/sku",query: {id:'1'}})
        },
        // 上架下架
        handlePublishStatusChange(index,row){
            //修改商品的上架下架
            console.log(row);
            changeGoodStatus(row).then(res =>{
                if(res.success){
                this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success'
                });
                this.search();
                }else{
                this.$notify({
                title: '保存失败',
                message: res.msg,
                type: 'error'
                });
                }
            });
            
        },
              //size变化的时候触发
        handleSizeChange(size) {
            this.searchMap.size = size;
            this.search();
        },
        //当前页发生变化的时候触发
        handleCurrentChange(page) {
            this.searchMap.page = page;
            this.search();
        },
    },
    created(){
        this.findAllBrand();
        this.findCatCascade();
        this.search();
    },
    filters: {
        splitImg(source){
            if(source){
                var imgUrls = source.split(",")
                return imgUrls[0]
            }else{
                return "";
            }
        },
        goodsNameFilter(source){
            if(source){
                return source.substring(0,8)+"..."
            }else{
                return "--"
            }
        },
        auditStatusFiler(source,verifyStatusOptions){
            var str = ""
            verifyStatusOptions.forEach(item =>{
             
                if(item.value == source){
                    str = item.label
                }
            })
            return str
        }
    }
  
  }
</script>
<style></style>
